import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _typeof from "@babel/runtime/helpers/esm/typeof";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["className", "style", "bodyStyle", "headStyle", "title", "subTitle", "extra", "tip", "wrap", "layout", "loading", "gutter", "tooltip", "split", "headerBordered", "bordered", "children", "size", "actions", "ghost", "hoverable", "direction", "collapsed", "collapsible", "collapsibleIconRender", "defaultCollapsed", "onCollapse", "checked", "onChecked", "tabs", "type"];
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { RightOutlined } from '@ant-design/icons';
import { LabelIconTip } from '@ant-design/pro-utils';
import { ConfigProvider, Grid, Tabs } from 'antd-v4';
import classNames from 'classnames';
import omit from 'omit.js';
import useMergedState from "rc-util/es/hooks/useMergedState";
import React, { useContext } from 'react';
import Actions from '../Actions';
import Loading from '../Loading';
import './index.less';
var useBreakpoint = Grid.useBreakpoint;
var Card = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var _classNames2, _classNames3, _classNames4;

  var className = props.className,
      style = props.style,
      _props$bodyStyle = props.bodyStyle,
      bodyStyle = _props$bodyStyle === void 0 ? {} : _props$bodyStyle,
      _props$headStyle = props.headStyle,
      headStyle = _props$headStyle === void 0 ? {} : _props$headStyle,
      title = props.title,
      subTitle = props.subTitle,
      extra = props.extra,
      tip = props.tip,
      _props$wrap = props.wrap,
      wrap = _props$wrap === void 0 ? false : _props$wrap,
      layout = props.layout,
      loading = props.loading,
      _props$gutter = props.gutter,
      gutter = _props$gutter === void 0 ? 0 : _props$gutter,
      tooltip = props.tooltip,
      split = props.split,
      _props$headerBordered = props.headerBordered,
      headerBordered = _props$headerBordered === void 0 ? false : _props$headerBordered,
      _props$bordered = props.bordered,
      bordered = _props$bordered === void 0 ? false : _props$bordered,
      children = props.children,
      size = props.size,
      actions = props.actions,
      _props$ghost = props.ghost,
      ghost = _props$ghost === void 0 ? false : _props$ghost,
      _props$hoverable = props.hoverable,
      hoverable = _props$hoverable === void 0 ? false : _props$hoverable,
      direction = props.direction,
      controlCollapsed = props.collapsed,
      _props$collapsible = props.collapsible,
      collapsible = _props$collapsible === void 0 ? false : _props$collapsible,
      collapsibleIconRender = props.collapsibleIconRender,
      _props$defaultCollaps = props.defaultCollapsed,
      defaultCollapsed = _props$defaultCollaps === void 0 ? false : _props$defaultCollaps,
      onCollapse = props.onCollapse,
      checked = props.checked,
      onChecked = props.onChecked,
      tabs = props.tabs,
      type = props.type,
      rest = _objectWithoutProperties(props, _excluded);

  var _useContext = useContext(ConfigProvider.ConfigContext),
      getPrefixCls = _useContext.getPrefixCls;

  var screens = useBreakpoint();

  var _useMergedState = useMergedState(defaultCollapsed, {
    value: controlCollapsed,
    onChange: onCollapse
  }),
      _useMergedState2 = _slicedToArray(_useMergedState, 2),
      collapsed = _useMergedState2[0],
      setCollapsed = _useMergedState2[1]; // 顺序决定如何进行响应式取值，按最大响应值依次取值，请勿修改。


  var responsiveArray = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
  /**
   * 根据响应式获取 gutter, 参考 antd 实现
   *
   * @param gutter Gutter
   */

  var getNormalizedGutter = function getNormalizedGutter(gut) {
    var results = [0, 0];
    var normalizedGutter = Array.isArray(gut) ? gut : [gut, 0];
    normalizedGutter.forEach(function (g, index) {
      if (_typeof(g) === 'object') {
        for (var i = 0; i < responsiveArray.length; i += 1) {
          var breakpoint = responsiveArray[i];

          if (screens[breakpoint] && g[breakpoint] !== undefined) {
            results[index] = g[breakpoint];
            break;
          }
        }
      } else {
        results[index] = g || 0;
      }
    });
    return results;
  };
  /**
   * 根据条件返回 style，负责返回空对象
   *
   * @param withStyle 是否符合条件
   * @param appendStyle 如果符合条件要返回的 style 属性
   */


  var getStyle = function getStyle(withStyle, appendStyle) {
    return withStyle ? appendStyle : {};
  };

  var getColSpanStyle = function getColSpanStyle(colSpan) {
    var span = colSpan; // colSpan 响应式

    if (_typeof(colSpan) === 'object') {
      for (var i = 0; i < responsiveArray.length; i += 1) {
        var breakpoint = responsiveArray[i];

        if (screens[breakpoint] && colSpan[breakpoint] !== undefined) {
          span = colSpan[breakpoint];
          break;
        }
      }
    } // 当 colSpan 为 30% 或 300px 时


    var colSpanStyle = getStyle(typeof span === 'string' && /\d%|\dpx/i.test(span), {
      width: span,
      flexShrink: 0
    });
    return {
      span: span,
      colSpanStyle: colSpanStyle
    };
  };

  var prefixCls = getPrefixCls('pro-card');

  var _getNormalizedGutter = getNormalizedGutter(gutter),
      _getNormalizedGutter2 = _slicedToArray(_getNormalizedGutter, 2),
      horizonalGutter = _getNormalizedGutter2[0],
      verticalGutter = _getNormalizedGutter2[1]; // 判断是否套了卡片，如果套了的话将自身卡片内部内容的 padding 设置为0


  var containProCard = false;
  var childrenArray = React.Children.toArray(children);
  var childrenModified = childrenArray.map(function (element, index) {
    var _element$type;

    if (element === null || element === void 0 ? void 0 : (_element$type = element.type) === null || _element$type === void 0 ? void 0 : _element$type.isProCard) {
      var _classNames;

      containProCard = true; // 宽度

      var colSpan = element.props.colSpan;

      var _getColSpanStyle = getColSpanStyle(colSpan),
          span = _getColSpanStyle.span,
          colSpanStyle = _getColSpanStyle.colSpanStyle;

      var columnClassName = classNames(["".concat(prefixCls, "-col")], (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-split-vertical"), split === 'vertical' && index !== childrenArray.length - 1), _defineProperty(_classNames, "".concat(prefixCls, "-split-horizontal"), split === 'horizontal' && index !== childrenArray.length - 1), _defineProperty(_classNames, "".concat(prefixCls, "-col-").concat(span), typeof span === 'number' && span >= 0 && span <= 24), _classNames));
      return _jsx("div", {
        style: _objectSpread(_objectSpread(_objectSpread({}, colSpanStyle), getStyle(horizonalGutter > 0, {
          paddingRight: horizonalGutter / 2,
          paddingLeft: horizonalGutter / 2
        })), getStyle(verticalGutter > 0, {
          paddingTop: verticalGutter / 2,
          paddingBottom: verticalGutter / 2
        })),
        className: columnClassName,
        children: /*#__PURE__*/React.cloneElement(element)
      }, "pro-card-col-".concat((element === null || element === void 0 ? void 0 : element.key) || index));
    }

    return element;
  });
  var cardCls = classNames("".concat(prefixCls), className, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-border"), bordered), _defineProperty(_classNames2, "".concat(prefixCls, "-contain-card"), containProCard), _defineProperty(_classNames2, "".concat(prefixCls, "-loading"), loading), _defineProperty(_classNames2, "".concat(prefixCls, "-split"), split === 'vertical' || split === 'horizontal'), _defineProperty(_classNames2, "".concat(prefixCls, "-ghost"), ghost), _defineProperty(_classNames2, "".concat(prefixCls, "-hoverable"), hoverable), _defineProperty(_classNames2, "".concat(prefixCls, "-size-").concat(size), size), _defineProperty(_classNames2, "".concat(prefixCls, "-type-").concat(type), type), _defineProperty(_classNames2, "".concat(prefixCls, "-collapse"), collapsed), _defineProperty(_classNames2, "".concat(prefixCls, "-checked"), checked), _classNames2));
  var bodyCls = classNames("".concat(prefixCls, "-body"), (_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefixCls, "-body-center"), layout === 'center'), _defineProperty(_classNames3, "".concat(prefixCls, "-body-direction-column"), split === 'horizontal' || direction === 'column'), _defineProperty(_classNames3, "".concat(prefixCls, "-body-wrap"), wrap && containProCard), _classNames3));

  var cardBodyStyle = _objectSpread(_objectSpread(_objectSpread({}, getStyle(horizonalGutter > 0, {
    marginRight: -horizonalGutter / 2,
    marginLeft: -horizonalGutter / 2
  })), getStyle(verticalGutter > 0, {
    marginTop: -verticalGutter / 2,
    marginBottom: -verticalGutter / 2
  })), bodyStyle);

  var loadingDOM = /*#__PURE__*/React.isValidElement(loading) ? loading : _jsx(Loading, {
    prefix: prefixCls,
    style: bodyStyle.padding === 0 || bodyStyle.padding === '0px' ? {
      padding: 24
    } : undefined
  }); // 非受控情况下展示

  var collapsibleButton = collapsible && controlCollapsed === undefined && (collapsibleIconRender ? collapsibleIconRender({
    collapsed: collapsed
  }) : _jsx(RightOutlined, {
    rotate: !collapsed ? 90 : undefined,
    className: "".concat(prefixCls, "-collapsible-icon")
  }));
  return _jsxs("div", _objectSpread(_objectSpread({
    className: cardCls,
    style: style,
    ref: ref,
    onClick: function onClick(e) {
      var _rest$onClick;

      onChecked === null || onChecked === void 0 ? void 0 : onChecked(e);
      rest === null || rest === void 0 ? void 0 : (_rest$onClick = rest.onClick) === null || _rest$onClick === void 0 ? void 0 : _rest$onClick.call(rest, e);
    }
  }, omit(rest, ['prefixCls', 'colSpan'])), {}, {
    children: [(title || extra || collapsibleButton) && _jsxs("div", {
      className: classNames("".concat(prefixCls, "-header"), (_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefixCls, "-header-border"), headerBordered || type === 'inner'), _defineProperty(_classNames4, "".concat(prefixCls, "-header-collapsible"), collapsibleButton), _classNames4)),
      style: headStyle,
      onClick: function onClick() {
        if (collapsibleButton) setCollapsed(!collapsed);
      },
      children: [_jsxs("div", {
        className: "".concat(prefixCls, "-title"),
        children: [collapsibleButton, _jsx(LabelIconTip, {
          label: title,
          tooltip: tooltip || tip,
          subTitle: subTitle
        })]
      }), extra && _jsx("div", {
        className: "".concat(prefixCls, "-extra"),
        children: extra
      })]
    }), tabs ? _jsx("div", {
      className: "".concat(prefixCls, "-tabs"),
      children: _jsx(Tabs, _objectSpread(_objectSpread({
        onChange: tabs.onChange
      }, tabs), {}, {
        children: loading ? loadingDOM : children
      }))
    }) : _jsx("div", {
      className: bodyCls,
      style: cardBodyStyle,
      children: loading ? loadingDOM : childrenModified
    }), _jsx(Actions, {
      actions: actions,
      prefixCls: prefixCls
    })]
  }));
});
export default Card;